<template>
  <div>
    <el-select class="start_select start_input node_type_select" v-model="nodeName" :placeholder="$t('configLazyLoad.channel.selectNodeType')" @change="oneChange">
      <el-option
        :label="$t('configLazyLoad.process.node')"
        value="system">
      </el-option>
      <el-option
        v-show="transRoute"
        :label="$t('configLazyLoad.process.node2')"
        value="custRoute">
      </el-option>
      <el-option
        v-show="transeSkill"
        :label="$t('configLazyLoad.process.node4')"
        value="queue">
      </el-option>
      <el-option
        v-show="transeTime"
        :label="$t('configLazyLoad.process.node8')"
        value="time">
      </el-option>
      <el-option
        v-show="transeRobot"
        :label="$t('configLazyLoad.process.node9')"
        value="robot">
      </el-option>
      <el-option
        v-show="transeExten"
        :label="$t('configLazyLoad.process.node3')"
        value="exten">
      </el-option>
      <el-option
        v-show="transeLeaveMsg"
        :label="$t('configLazyLoad.process.node10')"
        value="leavemsg">
      </el-option>
    </el-select>
    <el-select class="node_name_select" v-model="nodeLiName" :placeholder="$t('configLazyLoad.process.processLabel3')" @change="twoChange">
      <el-option
        v-for="item in COptions"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>
//  import { deepClone } from '@utils/m7Utils.js'
  export default {
    name: 'webchatNodeSelect',
    data () {
      return {
        transeSkill: true,
        transeTime: true,
        transeRobot: true,
        nodeName: '',
        nodeLiName: ''
      }
    },
    watch: {
      nodeType (cur) {
        this.nodeName = cur
      },
      nodeLi (cur) {
        this.nodeLiName = cur
      }
    },
    methods: {
      oneChange (data) {
        let dataNew = data
        if (this.isObj) {
          this.dataObj[this.onePath] = data
          dataNew = this.dataObj
        }
        this.$emit('oneChange', {value: dataNew, path: this.onePath, index: this.index})
        let dataNewTwo = ''
        if (this.isObj) {
          if (data === 'system') {
            this.dataObj[this.twoPath] = 'finish'
          } else {
            this.dataObj[this.twoPath] = ''
          }
          dataNewTwo = this.dataObj
        } else {
          if (data === 'system') {
            dataNewTwo = 'finish'
          }
        }
        this.$emit('twoChange', {value: dataNewTwo, path: this.twoPath, index: this.index})
      },
      twoChange (data) {
        let dataNew = data
        if (this.isObj) {
          this.dataObj[this.twoPath] = data
          dataNew = this.dataObj
        }
        this.$emit('twoChange', {value: dataNew, path: this.twoPath, index: this.index})
      }
    },
    computed: {
      COptions () {
        if (!this.nodeName) return []
        if (this.nodeName === 'system') {
          if (this.transeLineUp) {
            return [{ label: this.$t('configLazyLoad.channel.endConversation'), value: 'finish' }, { label: this.$t('configLazyLoad.channel.queue'), value: 'queue' }]
          } else {
            return [{ label: this.$t('configLazyLoad.channel.endConversation'), value: 'finish' }]
          }
        }
        let nodeStr = this.nodeName + 'Node'
        let nodes = this.$store.state.config.channelConfig.webchatSchdule[nodeStr]
        let arr = nodes.map(node => ({ label: node.name, value: node._id }))
        let arrNew = []
        arrNew = arr.filter((item) => {
          if (item.value !== this.contentId) {
            return true
          } else {
            return false
          }
        })
        if (this.nodeLiName) {
          let flag = false
          arrNew.forEach((item) => {
            if (item.value === this.nodeLiName) {
              flag = true
            }
          })
          if (!flag) {
            this.nodeLiName = ''
          }
        }
        return arrNew
      }
    },
    props: {
//      判断是否传了obj进来
      isObj: {
        type: Boolean,
        default: false
      },
      dataObj: {
        type: Object,
        default: function () {
          return {}
        }
      },
      index: {
        type: String,
        default: ''
      },
      onePath: String,
      twoPath: String,
      contentId: String,
      transeLeaveMsg: {
        type: Boolean,
        default: false
      },
      transRoute: {
        type: Boolean,
        default: false
      },
      transeExten: {
        type: Boolean,
        default: false
      },
      transeLineUp: {
        type: Boolean,
        default: false
      },
      currentType: {
        type: String,
        default: ''
      },
      nodeType: String,
      nodeLi: String
    },
    beforeMount () {
      this.nodeName = this.nodeType
      this.nodeLiName = this.nodeLi
      if (this.currentType === 'queue') {
        this.transeSkill = false
      } else if (this.currentType === 'time') {
        this.transeTime = false
      } else if (this.currentType === 'robot') {
        this.transeRobot = false
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .start_input
    position relative
    margin-right 24px
    &:before
      content: ''
      border-top 2px solid $c-border2
      width 16px
      position absolute
      top 18px
      right -20px
  .node_type_select,.node_name_select
    width calc(50% - 20px)
</style>
